<template>
    <div class="wrap">
        <div class="container">
            <TopBreadCrumb></TopBreadCrumb>
            <div class="user_center_content">
                <!-- 左侧菜单 -->
                <LeftNavMenu></LeftNavMenu>
                <!-- 左侧菜单结束 -->
                <!-- 右侧内容开始  -->
                <div class="right_user_content">
                    <div class="right-title">
                        <div class="left">合同资质</div>
                        <div class="right text-blue">
                            <a :href="baseURL + '/uploads/20231102/26836d69c84777f6302993fed9cf55ae.zip'"><span class="el-icon-download"></span>合同样本下载</a>
                        </div>
                    </div>
                    <div class="contract-content">
                        <div class="contract-list">
                            <el-table
                                :data="data.data"
                                style="width: 100%">
                                <el-table-column
                                    prop="contract_name"
                                    label="合同名称"
                                    min-width="300">
                                </el-table-column>
                                <el-table-column
                                    prop="contract_phone"
                                    label="联系方式"
                                    align="center"
                                    width="160"
                                    >
                                </el-table-column>
                                <el-table-column
                                    prop="state"
                                    label="状态"
                                    align="center"
                                    width="150">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.status == -1">退回审核</span>
                                        <span v-if="scope.row.status == 0">审核中</span>
                                        <span v-if="scope.row.status == 1">审核通过</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="operation"
                                    label="操作"
                                    align="center"
                                    width="150">
                                    <!-- <nuxt-link to="/products/list">查看合同</nuxt-link> -->
                                    <template slot-scope="scope">
                                        <el-upload
                                            class="upload-demo"
                                            :action="baseURLApi + '/api.common/upload'"
                                            multiple
                                            :on-success="handleSuccess"
                                            ref="imageUpload"
                                            :headers="headers"
                                            :limit="1"
                                            :show-file-list="false"
                                            v-if="scope.row.is_upload == 0"
                                            >
                                            <el-button type="text" style="font-size: 16px;" @click="clickRow(scope.row)">点击上传</el-button>
                                        </el-upload>
                                        <a :href="baseURL + scope.row.contact" target="_blank" v-else>查看合同</a>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <Custom-pagination :total="data.total" :page.sync="query.page" :pageSize.sync="query.pageSize" @pagination="LoadDataList" :hidden="pageHidden"></Custom-pagination>
                    </div>
                </div>
                <!-- 右侧内容结束 -->
            </div>
        </div>
    </div>
</template>

<script>
import { baseURL, baseURLApi } from "@/utils/request";
import { getToken } from "@/utils/auth";
import api from "@/api/contract";
export default {
    data() {
        return {
            data: {
                data: [],
                total: 0
            },
            query: {
                page: 1,
                pageSize: 10,
                order: "desc",
                sort: "create_time"
            },
            pageHidden: true,
            baseURLApi: baseURLApi,
            baseURL: baseURL,
            headers: {
                token: getToken(),
            },
            uploadForm: {
                id: null
            }
        };
    },
    methods: {
        handleSuccess: function (res, file) {
            if (res.code == 1) {
                this.uploadForm.contact = res.data.url;
                api.UploadContract(this.uploadForm)
                    .then((res) => {
                        this.$message.success("上传成功");
                        this.LoadDataList();
                        this.$refs.imageUpload.clearFiles();
                    }).catch(() => {

                    })
            } else {
                this.$message.error("上传失败");
            }
        },
        clickRow: function (item) {
            this.uploadForm.id = item.id;
        },
        LoadDataList: function () {
            api.GetContractList(this.query)
                    .then((res) => {
                        this.data = res.data;
                        this.pageHidden = false;
                        if (this.query.pageSize >= this.data.total) {
                            this.pageHidden = true;
                        }
                    })
        }
    },
    mounted: function(){
        this.LoadDataList();
    }
};
</script>
<style>


</style>